<template>
	<view class="uiwu-tabBar-box uiwu-ios">
		<view class="uiwu-tabBar uiwu-ios">
			<view class="uiwu-list uiwu-flex-space">
				<view v-for="(item, index) in menu" :key="index" class="uiwu-list-item uiwu-flex-column uiwu-flex-center" @tap.stop="openTabBar(item)">
					<image :src="cuont == index ? item.icon1 : item.icon" mode="widthFix" />
					<text :class="cuont == index ? 'active' : ''">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref , onMounted, watch } from 'vue';
	import { userInfo } from '@/api/api';
	import { useStore } from 'vuex';
	defineProps({
		cuont:{
			default:0,
			type:Number
		}
	})
	interface MenuData {
	  name: string;
	  icon: string;
	  icon1: string;
	  path: string;
	}
	const store = useStore();
	const increment = (data,type) => {
	    store.commit(type, data);
	};
	const menu = ref<Array<MenuData>>([{
		name:'零食机',
		icon:'/static/tab/1.png',
		icon1:'/static/tab/11.png',
		path:'/pages/index/index'
	},{
		name:'积分',
		icon:'/static/tab/2.png',
		icon1:'/static/tab/22.png',
		path:'/pages/pointsmall/pointsmall'
	},{
		name:'充值',
		icon:'/static/tab/3.png',
		icon1:'/static/tab/33.png',
		path:'/pages/recharge/recharge'
	},{
		name:'我的',
		icon:'/static/tab/4.png',
		icon1:'/static/tab/44.png',
		path:'/pages/user/user'
	}])
	const openTabBar = ({path}) : void => {
		uni.switchTab({
			url:path
		})
	}
	const getUserInfo = async () => {
		const {data} = await userInfo();
		increment(data,'set_user')
	}
	onMounted(()=>{
		uni.hideTabBar()
		getUserInfo()
	})
	defineExpose({getUserInfo})
</script>
<style lang="scss">
	.uiwu-tabBar-box{
		height: 148rpx;
		box-sizing: content-box;
	}
	.uiwu-tabBar{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		height: 98rpx;
		background: #272323;
		border-radius: 32rpx 32rpx 0px 0px;
		box-sizing: content-box;
		.uiwu-list{
			width: 100%;
			height: 98rpx;
			&-item{
				flex: 1;
				position: relative;
				image{
					width: 88rpx;
					position: relative;
					top: -30rpx;
				}
				text{
					font-size: 22rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 4rpx;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					text-align: center;
					&.active{
						color: #FAC500;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
